<template>
  <div class="ywsl">
    <div class="rg" style="width: 100%">
      <div></div>
      <div>
        <el-button type="primary" @click="dialogVisibleA = true"
          >审批</el-button
        >
        <el-button type="primary" @click="dialogVisibleB = true"
          >查看订单</el-button
        >
      </div>
    </div>
    <el-row>
      <el-tabs v-model="activeName" style="width: 100%">
        <el-tab-pane label="业务勘查" name="first">
          <zwkc />
        </el-tab-pane>
        <el-tab-pane label="业务受理" name="second">
          <zwsl />
        </el-tab-pane>
      </el-tabs>
    </el-row>

    <!-- 双跨--审批 -->
    <el-dialog
      title="审批"
      :visible.sync="dialogVisibleA"
      width="60%"
      top="6vh"
    >
      <el-scrollbar>
        <sp />
      </el-scrollbar>
      <span slot="footer">
        <el-button @click="dialogVisibleA = false">返 回</el-button>
      </span>
    </el-dialog>

    <!-- 双跨--订单 -->
    <el-dialog
      title="查看订单"
      :visible.sync="dialogVisibleB"
      width="60%"
      top="6vh"
    >
      <el-scrollbar>
        <Dd />
      </el-scrollbar>
      <span slot="footer">
        <el-button @click="dialogVisibleB = false">返 回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import zwkc from './components/zwkc'
import zwsl from './components/zwsl'
import sp from './components/sp'
import Dd from './components/dd'
export default {
  components: {
    zwkc,
    zwsl,
    sp,
    Dd
  },

  data() {
    return {
      checked: '业务一',
      activeName: 'first',
      dialogVisibleA: false,
      dialogVisibleB: false
    }
  },

  watch: {
    checked() {
      this.activeName = 'first'
    }
  },

  methods: {
    handleClickSP() {
      this.$message({
        message: '辅助检查通过',
        type: 'success'
      })
    },
    creatOrder() {
      let orderCode = `D${this.$baseFunc.randomNum(100000, 999999, 0)}`
      this.$message({
        message: `操作成功！订单号：${orderCode}`,
        type: 'success'
      })
    },
    handleChange() {
      this.paneB.tableDataC.row = [
        {
          colA: 'A3211322',
          colB: '是',
          colC: '2000',
          colD: 'CMPP3.0',
          colE: '127.3.21.10',
          colF: '200',
          colG: '是',
          colH: '总部A',
          colI: '90条每秒',
          colJ: '',
          colK: 'http://112.35.1.155.8086',
          colL: '',
          colM: '2020.10.4',
          colN: '市场部'
        },
        {
          colA: 'A3621412',
          colB: '是',
          colC: '1000',
          colD: 'CMPP3.0',
          colE: '127.3.21.14',
          colF: '100',
          colG: '是',
          colH: '总部B',
          colI: '100条每秒',
          colJ: '',
          colK: 'http://112.35.1.155.8087',
          colL: '',
          colM: '2020.10.5',
          colN: '市场部'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.rg {
  display: flex;
  justify-content: space-between;
}
.ywsl {
  margin: 0 40px;
}
/deep/.el-dialog__body {
  position: relative;
  height: 65vh;
  overflow: hidden;
}
.upload-demo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
a {
  text-decoration: none;
  color: #fff;
}
</style>
